<style rel="stylesheet/scss" lang="scss" scoped>
	.box-flex{
		display: flex;
		margin-bottom: 20px;
		.sp{
			margin-left: 10px;
		}
		.flex-box{
			flex: 1;
			display: flex;
			flex-direction: column;
			>span{
				margin-left: 10px;
			}
			>div{
				margin: 20px 0;
				margin-left: 50px;
			}
		}
	}
	.w-span{
		min-width: 100px;
		line-height: 40px;
		display: inline-block;
	}
	.role-input{
		width: 16px;
		height: 16px;
		vertical-align: middle;
		display: inline-block;
		margin-top: -3px;
	}
</style>
<template>
	<div v-if="flag">
		
		<el-row class=" box-flex">
			<el-col :span="6" class="box-flex m-l-10">
				<span class="w-span">角色名称</span>
				<el-input placeholder="单行输入" clearable  v-model="roleName" maxLength="20"></el-input>
			</el-col>
		</el-row>
		<el-row class="box-flex">
			<span class="sp">权限描述</span>
			<div class="flex-box">
				<div v-for='(menu, index) in menuList'>
					 <input v-model="menu.select" class="role-input" @change.stop.prevent="selectRole(menu,index)" :id="'checkbox'+index" :label="menu.menuUrl" type="checkbox">
					 {{menu.name}}
					<div  style='width:600px;height:auto;margin-left:30px;margin-top: 5px;' >
						<div style="width:200px;display:inline-block" v-for='(f, childIndex) in menu.seList' >
							<input 
								v-model="f.select"  
								:label="f.name"  
								@change.stop.prevent="selectChild(index,childIndex,f.val )" 
								type="checkbox" 
								class="role-input"
								:id="'checkbox'+index+childIndex"/>
							{{f.name}}
						</div>
					</div>
				</div>
			</div>
		</el-row>
		<el-row class="box-flex">
			<el-button type="primary" @click="submitRole">保存</el-button>
		</el-row>
	</div>
</template>
<script>
	import { mapMutations,mapGetters } from 'vuex'
	import { DEFAUL_INDEX, SUCCESS_REQUEST_STATUS } from '@/utils/config.js'
	export default {
		props: {
			roleId: {
				type: String,
				required: false,
				default: ''
			}
		},
		data() {
			return {
				menuList: [],
				functionMap: {},
				flag: false,
				roleName: '',
				checkFunctionList: {},
			}
		},
		created() {
			setTimeout(() => {
				this._initInfo()
			},200)
			this.menuList = sessionStorage.getItem('menuList') ? JSON.parse(sessionStorage.getItem('menuList')) : []
			this.functionMap = sessionStorage.getItem('functionMap') ? JSON.parse(sessionStorage.getItem('functionMap')) : {}
		},
		methods: {
			// 保存数据
			submitRole() {
				console.log(this.menuList)
				let attr = !this.roleName ? '请填写角色名称':  ''
				let flag = false
				// !this.menuList.filter((item) => { return !item.select }).length ? '请选择权限配置':
				this.menuList.forEach((item) => {
					item.seList.forEach((cel) => {
						if(cel.select) {
							flag = true
							return
						}
					})
				})
				if(!flag) attr = '请选择权限配置'
				if(attr) {
					this.$message({
					  message: attr,
					  type: 'warning'
					});
					return
				}
				let selecttList = this.menuList
				let menu = []
				if(selecttList && selecttList.length > 0) {
					selecttList.forEach((child) => {
						if(child.list.length > 0) {
							let menuObj = {
								functions: child.list.join(','),
								menuUrl: child.menuUrl
							}
							menu.push(menuObj)
						}
						
					})
				}
				this.$ajax({
					api: 'rule/save',
					contentType: 'application/json',
					params: {
						id: this.roleId,
						menu: menu,
						name: this.roleName
					}
				}).then(res => {
					console.log(res)
					if(res.status === SUCCESS_REQUEST_STATUS) {
						this.$message({
							message: '操作成功',
							type: 'success'
						})
						this.$emit('refresh')
						this.setTabCurrentIndex(2)
					}else{
						this.$message({
							message: res.data.message,
							type: 'error'
						})
					}
				}).catch(err => {
					this.$message({
						message: err.message,
						type: 'error'
					})
				})
			},
			/**
			 * @desc 设置父级选中
			 */
			selectRole(item, index) {
				let se = document.getElementById("checkbox"+index).checked　
				if(se) {
					item.functions.split(',').forEach(it => {
						if(it) {
							item.list.push(it)
						}
					})
				}else{
					item.list = []
				}
				this.menuList[index].select = se
				if(se) {
					
					this.menuList[index].seList.forEach((item, childIndex) => {
						item.select = se
						let preCheck = document.getElementById("checkbox"+index+childIndex)
						preCheck.checked = true
					})
				} else{
					this.menuList[index].seList.forEach((item, childIndex) => {
						item.select = se
						let preCheck = document.getElementById("checkbox"+index+childIndex)
						preCheck.checked = false
					})
				}
				console.log(item)
				console.log(this.menuList)
				
			},
			/**
			* @desc 设置子选中
			*/
			selectChild(preIndex, childIndex,val) {
				console.log(val)
				let se = document.getElementById("checkbox"+preIndex+childIndex).checked　
				let childSelectLength = 0
				this.menuList[preIndex].seList[childIndex].select = se
				if(se) {
					this.menuList[preIndex].list.push(val)
				}else{
					this.menuList[preIndex].list.forEach((item, index) => {
						if(item == val) {
							this.menuList[preIndex].list.splice(index,1)
						}
					})
				}
				childSelectLength = this.menuList[preIndex].seList.filter((item) => { return item.select}).length
				let preCheck = document.getElementById("checkbox"+preIndex)
				preCheck.checked = childSelectLength == this.menuList[preIndex].seList.length ? true : false 
				console.log(this.menuList)
			},
			_initInfo() {
				
				var checkFunctionList = {}
				if(this.roleId) {
					this.$ajax({
						api:'rule/info',
						params: {
							id: this.roleId
						}
					}).then(res => {
						this.menuList.forEach((item) => {
							let fun = item.functions.split(',')
							res.data.checkMenuList.forEach((element) => {
								if(item.menuUrl == element){
									item.targetFn = res.data.checkFunctionList[element]
									
								}
							})
							checkFunctionList[item.menuUrl] = item.functions.split(',');
							this.checkFunctionList = checkFunctionList;
							this.roleName = res.data.rule.name
							item.list = []
							item.seList = []
							if( item.targetFn && item.functions.split(',').length == item.targetFn.length+1){
								item.select = true
								item.functions.split(',').forEach(it => {
									if(it) {
										item.list.push(it)
									}
								})
								
							}else{
								item.select = false
								item.list= []
							}
							if(item.targetFn) {
								item.list = item.targetFn
							}
							if(item.functions.split(',')){
								item.functions.split(',').forEach((i) => {
									if(this.functionMap[i]) {
										item.seList.push({name: this.functionMap[i], select: false, val: i})
									}
								})
							}
							if(item.targetFn) {
								item.targetFn.forEach((cel) =>{
									item.seList.forEach((el) => {
										if(cel == el.val) {
											el.select = true
										}
									})
								})
							}
						})
						console.log(this.menuList)
						this.flag = true
					})
					return
				}
				this.HandleAllTree(checkFunctionList)
				
				this.flag = true

			},
			HandleAllTree(checkFunctionList) {
				this.menuList.forEach((item) => {
					checkFunctionList[item.menuUrl] = item.functions.split(',');
					this.checkFunctionList = checkFunctionList;
					item.seList = []
					item.list= []
					if(item.functions.split(',')){
						item.functions.split(',').forEach((i) => {
							console.log(this.functionMap[i])
							if(this.functionMap[i]) {
								item.seList.push({name: this.functionMap[i], select: item.select ? true :false, val: i})
							}
						})
					}
				})
				console.log(this.menuList)
			},
			...mapMutations({
				setTabCurrentIndex: 'SET_TAB_CURRENT_INDEX'
			}),
		},
		computed: {
			...mapGetters([
				'secondDirectory',
				'merchantInfo'
			])
		}
	}
</script>
